<template>
	<eui-page-frame :topHeight="460">
		<template #top>
			<view class="content-img" :style="[bgimage]">
				<eui-nav-bar rightIcon="" color="black" rightComponent="" style="margin-left:30rpx">
					<template #titleExpand>
						<eui-search-bar placeholder="搜索品牌" style="width: 634rpx; text-align: left;" radius="100"
							@confirm="search" bgColor="#FFFFFF" :borderColor="searchBorderColor" filterButton
							leftIcon="false" />
					</template>
				</eui-nav-bar>
			</view>
			<view class="dropdownsearch_header">
				<eui-dropdownsearch v-model:menuList="menuList" :themeColor="themeColor" @update:menuList="whereList"
					:duration="300" :isCeiling="true"></eui-dropdownsearch>
			</view>
		</template>
		<eui-page-content>
			<!-- <scroll-view scroll-y style="height: 100%;" @scrolltolower="lower"> -->
			<scroll-view class="scroll-box" scroll-y :refresher-enabled="true" refresher-threshold="45"
				:refresher-triggered="triggered" refresher-background="none" @scrolltolower="lower"
				@refresherrefresh="onRefresh">
				<eui-base-card v-for="(item, index) in brandList" :key="index" @click="openDetail(item)">
					<template #left>
						<image class="e-leftimage" :src="item.c_cover" mode="aspectFill" />
					</template>
					<view>
						<view class="e-content">
							<view class="e-titleName">{{ item?.c_bcode_name }}</view>
							<view style="margin-top: 16rpx; margin-bottom: 8rpx">
								<eui-uicons v-if="!!item?.c_bcode" style="margin-right: 8rpx;color:#888888 "
									size="24rpx" fontFamily="enjoyIcon5" customPrefix="icon-dingwei1" />
								<span v-if="!!item?.c_bcode"
									style="font-size: 26rpx; color: #888888">{{ item?.c_bcode }}</span>
							</view>
							<eui-tag v-if="!!item?.c_bccode_name"
								style="position: absolute; right:12rpx; font-size:20rpx" type="warning" size="mini"
								:text="item?.c_bccode_name" :plainFill="true"></eui-tag>
							<view style="font-size: 26rpx; height: 37rpx;; color: #888888; margin-bottom: 16rpx">
								{{ item?.c_ccode_name||'' }}
							</view>

							<view style='display:flex;flex-direction:row'>

								<eui-tag v-if="!!item?.c_status" style="font-size:20rpx;" :text="item.c_status"
									size="mini" shape="square" :borderColor="themeColor" :color='themeColor' :plain="true"
									:plainFill="true"></eui-tag>
								<eui-tag v-if="!!item?.c_abc" style="font-size:20rpx;" size="mini"
									:borderColor="themeColor" :color='themeColor' :plain="true" shape="square"
									:text="item?.c_abc" :plainFill="true"></eui-tag>
							</view>
						</view>
					</view>
				</eui-base-card>
			</scroll-view>
		</eui-page-content>
	</eui-page-frame>
</template>

<script setup type="ts">

	import { ref } from 'vue';
import {onShow, onLoad } from "@dcloudio/uni-app";
import useService from '@/hooks/useService';
import apps from '@/pages/MainViews/app';
import {useMainStore} from "@/store/modules/store";
import { getRelatedName, getDictName, getDictList,getStoreRelatedName } from '../components/RelatedName.js';
import { init } from '@/hooks/init';
import { storeToRefs } from 'pinia';
import { useThemeStore } from '@/store/themeStore';
const themeStore = useThemeStore(); // 主题
const { theme } = storeToRefs(themeStore);
const bgimage =theme._object.theme=='theme-blue'?"background-image: url(../../../static/img/rdsImgs/top_zpp_blue.jpg);":'background-image: url(../../../static/img/rdsImgs/top_zpp_orange.jpg);'
const themeColor = ref(theme._object.theme=='theme-blue'?'#02B7E6':'#FF6430')
const tagType = ref(theme._object.theme=='theme-blue'?'warning':'success')
const searchBorderColor = ref('1px solid '+themeColor.value)
const service = useService({ prefix: "apiApi" });
const mainStore = useMainStore();
const { loginInfo } = mainStore;



const brandList = ref([{
	c_bcode_name:'',
	c_bcode:'',
	c_ccode_name:'',
	c_bcode_name:'',
	c_status:'',
	c_abc:'',
	c_cover:'../../../static/img/no_image.png'
}]);
brandList.value = []
const conditions = ref({
	c_bcode_name:'',
	c_bccode:'',
	c_ccode:'',
	c_class:'',
	c_abc:''
})

onLoad(async()=>{
	// await init();
    await GetSearchData();
  await	getBrandData(false);
})


const search = (value)=>{
	 conditions.value.c_bcode_name = value.value;
	getBrandData(false);
}

const whereList = (newWhereList)=>{
	 conditions.value.c_bccode = newWhereList?.[0]?.value;
	 conditions.value.c_ccode = newWhereList?.[1]?.value;
	 conditions.value.c_class = newWhereList?.[2]?.value;
	 conditions.value.c_abc = newWhereList?.[3]?.value;
	 getBrandData(false);
}
const searchData =ref([]);
const menuList = ref(searchData);
const GetSearchData = async () => {
	searchData.value =[
    {
        title: '业态',
        type: 'cell',
        value: '',
        options: [
            {
                label: "全部",
                value: ''
            },
        ]
    },
    {
        title: '品类',
        type: 'cell',
        value: '',
        options: [
           {
               label: "全部",
               value: ''
           },
        ]
    },
    {
        title: '等级',
        type: 'cell',
        value: '',
        options: [
          {
              label: "全部",
              value: ''
          },

        ]
    },
    {
        title: '重要性',
        type: 'cell',
		value: '',
        options: [
            {
                label: "全部",
                value: ''
            },
        ]
    }
];
	const req = {
		WhereList: [{
			c_col: "c_mk_store_id",
			c_oper: "等于",
			c_value:loginInfo?.sUserStore,
			c_logic: "而且"
		}]
	};
	 uni.showLoading("查询中...");
     const res = await service.request('管易通品牌查询', 'GetBrandSearchItem', req);
	 uni.hideLoading();

	if (res?.ds.length > 0) {

		const dataYT = res.ds.map(x => {
			return {
				label: x.c_name,
				value: x.c_ccode
			}
		});
		searchData.value[0].options.push(...dataYT);
	}

	if (res?.ds1.length > 0) {
		const dataPL = res.ds1.map(x => {
			return {
				label: x.c_name,
				value: x.c_ccode
			}
		});
		searchData.value[1].options.push(...dataPL);
	}

	if (res?.ds2.length > 0) {
		const dataDJ = res.ds2.map(x => {
			return {
				label: x.c_name,
				value: x.c_id
			}
		});
		searchData.value[2].options.push(...dataDJ);
	}
	if (res?.ds3.length > 0) {
		const dataZYX = res.ds3.map(x => {
			return {
				label: x.c_name,
				value: x.c_id
			}
		});
		searchData.value[3].options.push(...dataZYX);
	}
};


//分页处理
const CurrentPage = ref(1);  //第几页
const PageSize = ref(10);  //每页10条
const RowsCount = ref(0);  //总条数
const PageCount = ref(1);  //总页数
const triggered = ref(false);
const freshing = ref(false);
const lower = async () => {
	if (CurrentPage.value < PageCount.value) {
		CurrentPage.value = CurrentPage.value + 1;
		 await getBrandData(true);
	}
}
	const onRefresh = async(e)=> {
		if (freshing.value) return;
		freshing.value = true;
		if (!triggered.value) {//界面下拉触发，triggered可能不是true，要设为true
			triggered.value = true;
			await getBrandData();
		}
		setTimeout(() => {
		triggered.value = false;//触发onRestore，并关闭刷新图标
		freshing.value = false;
		}, 1000)
	}
const getBrandData = async (curPage) => {
	if (!curPage) {
		CurrentPage.value = 1;
	}
	
	const req = {
		IsNotPage: false,
		CurrentPage: CurrentPage.value,
		PageSize: PageSize.value,
		WhereList: [
			{
				c_col: "c_mk_store_id",
				c_oper: "等于",
				c_value:loginInfo?.sUserStore,
				c_logic: "而且"
			},
			{
				c_col: "c_bcode_name",
				c_oper: "等于",
				c_value: conditions?.value.c_bcode_name,
				c_logic: "而且"
			},
			{
				c_col: "c_bccode",
				c_oper: "等于",
				c_value: conditions?.value.c_bccode,
				c_logic: "而且"
			},
			{
				c_col: "c_ccode",
				c_oper: "等于",
				c_value: conditions?.value.c_ccode,
				c_logic: "而且"
			},
			{
				c_col: "c_class",
				c_oper: "等于",
				c_value: conditions?.value.c_class,
				c_logic: "而且"
			},
			{
				c_col: "c_abc",
				c_oper: "等于",
				c_value: conditions?.value.c_abc,
				c_logic: "而且"
			}
		]
	}
	
	const res = await service.request('管易通品牌查询', 'EnjoyQueryList', req);
		if (res && res.ReturnObject) {
			
			CurrentPage.value = res.CurrentPage; //第几页
			PageSize.value = res.PageSize; //每页10条
			RowsCount.value = res.RowsCount; //总条数
			PageCount.value = res.PageCount; //总页数
			const serurl =  service.getBaseUrl();
			const objectData = (res.ReturnObject??[])?.map(x=>{
						return {
							c_bcode_name:x?.c_bcode_name, //getRelatedName('rdsBrands',x?.c_bcode),
							c_bcode:x.c_bcode,
							c_ccode_name:x?.c_ccode_name,//getRelatedName('rdsGdsclasses',x?.c_ccode)||'',
							c_bccode_name:x?.c_bccode_name,//getRelatedName('rdsGdsclasses',x?.c_bccode)||'',
							c_status:getBrandStatus(x?.c_status),//`${getDictName('品牌状态',x?.c_status)}`,
							c_abc:x.c_abc,
							c_cover:x.c_logo_pic ? (serurl + '/File/DownLoadFile/' + x.c_logo_pic) : ('../../../static/img/no_image.png' )
						}
					});;
			if (res.CurrentPage == 1) {
				brandList.value = objectData;
			} else {
				brandList.value = brandList.value.concat(objectData);
			}
		}
}

const getBrandStatus = (ccode)=>{
	switch(ccode)
	{
		case '0':
			return '初始信息'
		break;
		case '1':
			return '已建档'
		break;
		case '2':
			return '意向品牌'
		break;
		case '3':
			return '合作品牌'
		break;
		case '8':
			return '终止合作'
		break;
		case '9':
			return '已作废'
		break;
	   default:
			return '';
	   
	}
}

const openDetail = (item)=>{
		uni.navigateTo({url: `./detail?c_bcode=${item.c_bcode}&c_bccode_name=${item.c_bcode_name}`});
	}
</script>

<style lang="scss">
	@import '../../../static/font/enjoyicon5.0/iconfont.css';

	.scroll-box {
		height: 100%;
	}

	.e-titleName {
		font-size: 34rpx;
		font-family: 'PingFang SC', sans-serif;
		font-weight: 500;
		/* 中粗体 */
		width: 100%;
		overflow: hidden;
	}

	.e-content {
		margin-top: 32rpx;
		margin-bottom: 32rpx;
	}

	.content {
		display: flex;
		flex: 1;
		flex-direction: column;
		background-color: #f2f2f2;
		padding: 0px !important;
	}

	.content-img {
		background-image: url(../../../static/img/rdsImgs/top_zpp_blue.jpg);
		background-size: 100% 460rpx;
		background-repeat: no-repeat;
		width: 750rpx;
		height: 460rpx;
	}

	.dropdownsearch_header {
		margin-top: -88rpx;
		width: auto;
		height: 88rpx;
		background-color: rgba(255, 255, 255, 0.5);
		border-radius: 30rpx 30rpx 0rpx 0rpx;
	}

	.e-tagName {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.e-tag_abc_state {
		display: flex;
		flex-direction: row;
		margin-top: 20rpx;
		margin-bottom: 10rpx;
		flex-wrap: wrap;
	}

	.e-leftimage {
		width: 208rpx;
		height: 208rpx;
		border-radius: 10rpx;
		margin-top: 32rpx;
		margin-left: 28rpx;
		margin-right: 28rpx;
		margin-bottom: 28rpx;
	}

	::v-deep .tag-1 .u-tag{
		border-width: 1px;
		background: rgba(2, 183, 230, 0.1);
	}

	::v-deep .e-card__content{
		margin: 0!important;
	}
</style>